<template>
  <Content :style="{background:'#fff'}">
    <div class="policy-layout">
      <div class="policy-left">
        <Menu mode="vertical" active-key="1" active-name="PolicyLibraryLast">
          <div class="layout-nav">
              <Menu-item key="1" name="PolicyLibraryLast" to="/policy_library/index">政策跟踪</Menu-item>
              <Menu-item key="2" name="PolicyDeclareLast" to="/policy_library/declare">申报跟踪</Menu-item>
          </div>
        </Menu>
      </div>
      <div class="policy-right">
        <div v-if="$store.state.hidemenu==true">
          <Menu mode="horizontal" active-key="2" :active-name="$store.state.submenuname"  @on-select="onMenuSelect">
              <div class="layout-assistant">
                  <Menu-item key="1" name="PolicyLibrary" to="/policy_library/index">最新政策</Menu-item>
                  <Menu-item key="2" name="PolicyLibraryNews" to="/policy_library/index/news">科技政策动态</Menu-item>
                  <Menu-item key="3" name="PolicyLibraryReading" to="/policy_library/index/reading">科技政策解读</Menu-item>
                  <Menu-item key="4" name="PolicyLibraryAnalysis" to="/policy_library/index/analysis">跟踪分析</Menu-item>
                  <Menu-item key="5" name="PolicyLibraryManage" to="/policy_library/index/manage">跟踪设置</Menu-item>
              </div>
          </Menu>
        </div>
        <div class="hr10"></div>     
        <router-view></router-view>
      </div>
    </div>

  </Content>
</template>

<script>
import store from '@/store/index'
  export default {
    name: "PolicyLibrary",
    data(){
      return{
        loading:false,
        hidemenu:false
      }
    },
    store,
    components:{
    },
    methods:{
      onMenuSelect(name){//选中菜单时
        console.log(name," is clicked!");
        this.$store.state.hidemenu=true;//显示菜单项
      }
    },
    watch:{

    },
    created(){

    },
    mounted() {
 
    },

  }
</script>
<style>
.ivu-breadcrumb-item-link{color:#ffffff;}
</style>
<style rel="stylesheet/less" lang="less" scoped>
.displayflex(){
  -webkit-display: flex;
  -moz-display: flex;
  display: flex;
}
.flexdiv(){
  -webkit-flex:1;
  -moz-flex:1;
  flex:1;
}
.hr10{
  height: 10px;
  line-height: 0;
  font-size: 0;
}
.hr20{
  height: 20px;
  line-height: 0;
  font-size: 0;
}
.policy-layout{
  .displayflex();
}
.policy-left{
  width:60px;  
  .ivu-menu{
    width:60px!important;
  }
  .layout-nav{
    width:60px;
    overflow: hidden;
  }
  .ivu-menu-vertical.ivu-menu-light:after{
    display: none;
  }
  .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after{
    display: none;
  }
  .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu){
    background-color: #eeeeee;
    color: #333333;
  }
}
.policy-right{
  padding:0 10px 10px 10px;
  .flexdiv();
  .layout-assistant{
      height: inherit;
  }
  .policy-ivu-tab{
    .displayflex();
    height: 35px;
    overflow: hidden;
  }
  .ivu-menu-horizontal{
    height: 45px;
    line-height: 45px;
  }
  .ivu-menu-horizontal .ivu-menu-item, .ivu-menu-horizontal .ivu-menu-submenu{
    padding:0 3px;
    margin-right: 30px;
  }
}


  .flex-inline{
    display: flex;
  }
  .title{
    font-size: 16px;
    font-weight: 700;
    line-height: 40px;
    margin-right: 10px;
  }
  .ivu-tabs-nav-scroll{
    width: 830px;
  }
  .tagItem{
    padding: 0 10px;
    line-height: 40px;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    box-sizing: border-box;
    border: none;
    background: #ffffff;
    height: 40px;
    margin: 0px;
  }
  .tagsList .ivu-tabs-bar{
    margin-bottom: 0px;
    border:none;
  }
  .tagsList .ivu-tabs-content{
    display: none;
  }
  .ivu-form-item{
    display: inline-block;
    margin-right: 20px;
  }
  .ivu-btn > .ivu-icon{
    line-height: 1;
    font-size: 20px;
  }
</style>
